<!DOCTYPE html>
<head>
<title>d3js</title>
<meta charset="utf-8">
<style>
path {
  stroke: white;
  stroke-width: 0.25px;
  fill: grey;
}
</style>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script src="d3.v3.min.js"></script>


<div>
<svg width="700" height="200" style="position:absolute;top:8px;left:160px">
  <path d=" M 350 0
            L 0 200
            L 700 200
            L 350 0"
            stroke="black" stroke-width="5" fill="black" />
<text x="240" y="110" font-family="sans-serif" font-size="40px" fill="white">Where does</text>
<text x="150" y="170" font-family="sans-serif" font-size="40px" fill="white">your Property Tax go?</text>
</svg>
<script type='text/javascript' src='http://public.tableausoftware.com/javascripts/api/viz_v1.js'></script>
<div class='tableauPlaceholder' style='width: 663px; height: 437px;position:absolute;top:200px;left:200px'>
<noscript><a href='#'><img alt='House ' src='http:&#47;&#47;public.tableausoftware.com&#47;static&#47;images&#47;Ho&#47;House_0&#47;House&#47;1_rss.png' style='border: none' /></a></noscript><object class='tableauViz' width='663' height='437' style='display:none;'><param name='host_url' value='http%3A%2F%2Fpublic.tableausoftware.com%2F' /> <param name='site_root' value='' /><param name='name' value='House_0&#47;House' /><param name='tabs' value='no' /><param name='toolbar' value='yes' /><param name='static_image' value='http:&#47;&#47;public.tableausoftware.com&#47;static&#47;images&#47;Ho&#47;House_0&#47;House&#47;1.png' / > <param name='animate_transition' value='yes' /><param name='display_static_image' value='yes' /><param name='display_spinner' value='yes' /><param name='display_overlay' value='yes' /><param name='display_count' value='yes' /></object></div><div style='width:663px;height:22px;padding:0px 10px 0px 0px;color:black;font:normal 8pt verdana,helvetica,arial,sans-serif;'>

<svg width="900" height="400" style="position:absolute;top:200px;left:200px">
<text id="t1" x="40" y="110" font-family="sans-serif" font-size="20px" fill="white">49%</text>
<text id="t2" x="310" y="110" font-family="sans-serif" font-size="20px" fill="white">20%</text>
<text id="t3" x="460" y="110" font-family="sans-serif" font-size="20px" fill="white">19%</text>
<text id="t4" x="400" y="370" font-family="sans-serif" font-size="20px" fill="white">8%</text>
<text id="t5" x="500" y="370" font-family="sans-serif" font-size="20px" fill="white">3%</text>

<text id="t1" x="640" y="40" font-family="sans-serif" font-size="20px" fill="black">Your Home Value</text>
</svg>

<div style="position:absolute;top:285px;left:870px;">
<input type="radio" name="radio" value="Fulton" checked>Fulton<br/>
<input type="radio" name="radio" value="Dekalb" >Dekalb
</div>
<input id="HomeValue" type="text" value="200,000" style="position:absolute;top:250px;left:870px;font-family:sans-serif;font-size:20px;width:100px"/>
<input id="btnCalc" onclick="calculate()" type="button" value="Calculate" style="position:absolute;top:325px;left:870px;font-family:sans-serif;font-size:20px;width:110px"/>

<script>
Number.prototype.formatMoney = function(c, d, t){
var n = this, 
    c = isNaN(c = Math.abs(c)) ? 2 : c, 
    d = d == undefined ? "." : d, 
    t = t == undefined ? "," : t, 
    s = n < 0 ? "-" : "", 
    i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", 
    j = (j = i.length) > 3 ? j % 3 : 0;
   return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
 };
function calculate() {
	HomeValue = document.getElementById('HomeValue').value;
	t1 = HomeValue - 
	HomeValue = HomeValue.replace(",","");
	HomeValue = HomeValue.replace("$","");
	document.getElementById('t1').firstChild.nodeValue = t1.formatMoney(0);
	document.getElementById('t2').firstChild.nodeValue = t2.formatMoney(0);
	document.getElementById('t3').firstChild.nodeValue = t3.formatMoney(0);
	document.getElementById('t4').firstChild.nodeValue = t4.formatMoney(0);
	document.getElementById('t5').firstChild.nodeValue = t5.formatMoney(0);
}
</script>
</body>


